<!--  -->
<template>
    <div class="com-container">
        <div class="com-chart" ref="RefsHot"></div>
        <span class="prev" @click.stop.prevent="handleClick('prev')" :style="comStyle"><</span>
        <span class="next" @click.stop.prevent="handleClick('next')" :style="comStyle">></span>
        <div class="title" :style="comStyle">{{ catName }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
export default {
    components: {},
    computed: {
        ...mapState(['theme']),
        catName(){
            if(!this.allData){
                return ''
            }else{
                return this.allData[this.currentIndex].name
            }
        },
        //设置给标题的样式
        comStyle(){
            return {
                fontSize:`${this.titleFontSize}px`,
                color: getThemeValue(this.theme).titleColor
            }
        }
    },
    props: {},
    watch: {
        theme () {
            console.log('主题切换了')
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        }
    },
    data() {
        return {
            chartInstance:null,
            allData:null,
            currentIndex:0,//当前所展示的出来一级分类数据
            titleFontSize:0
        }
    },
    created(){
        this.$WebSocket.registerCallBack('hotData',this.getData)
    },
    mounted() {
        this.initChart();
        // this.getData(); 取消这一步
        // 通过socket通信,来传递需要获取的数据
        this.$WebSocket.send({
            action:'getData',
            socketType:'hotData',
            chartName:'hotproduct',
            value:""
        })
        window.addEventListener('resize', this.screenAdapter);
        //在页面加载完成时，主动调用一下
        this.screenAdapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
        this.$WebSocket.unRegisterCallBack('hotData')
    },
    methods: {
        //初始化
        async initChart() {
            const _this = this;
            this.chartInstance = this.$Echarts.init(this.$refs.RefsHot, this.theme);
            const initOptions = {
                title: {
                    text: '| 热销商品占比',
                    top: 20,
                    left: 20
                },
                legend: {
                    top:'15%',
                    icon:'circle'
                    // left: '5%',
                    // bottom: '5%',
                    // orient: 'vertical'
                },
                tooltip:{
                    show:true,
                    formatter:(arg)=>{
                        // 回调函数
                        const thirdCategory = arg.data.children
                        // 计算出所有三级分类的数值总和
                        let total = 0
                        thirdCategory.forEach(item => {
                            total += item.value
                        })
                        let retStr = ''
                        thirdCategory.forEach(item => {
                            retStr += `
                            ${item.name}:${parseInt(item.value / total * 100) + '%'}
                            <br/>
                            `
                        })
                        return retStr
                    }  
                },
                series:[
                    {
                        type:'pie',
                        label:{
                            show:false
                        },
                        //当饼图处于高亮状态
                        emphasis:{
                            label:{
                                show:true
                            },
                            labelLine:{
                                show:false,
                            },
                            labelText:{
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOptions)
        },
        //获取数据
        async getData(data) {
            try {
                console.log(data);
                // this.allData = await getDataJson('hotproduct');//
                this.allData = data
                this.updateChart()
            } catch (error) {
                console.log(error)
            }
        },
        //更新视图，处理数据
        updateChart() {
            const _this = this;
            //处理图表需要的数据
            const legendData = this.allData[this.currentIndex].children.map(item=>item.name)
            const seriesData = this.allData[this.currentIndex].children.map(item=>{
                return {
                    name:item.name,
                    value:item.value,
                    children:item.children
                }
            })
            const dataOptions = {
                legend: {
                    data: legendData
                },
                series: [
                    {
                        data:seriesData
                    }
                ]
            }
            this.chartInstance.setOption(dataOptions)
        },

        // 当浏览器的大小发生变化的时候，会调用方法，来完成屏幕的适配
        screenAdapter() {
            this.$nextTick(() => {
                this.titleFontSize = this.$refs.RefsHot.offsetWidth / 100 * 3.6;
                //分辨率大小的相关配置项
                const adapterOptions = {
                    title: {
                        textStyle: { //主标题 文字样式设置
                            fontSize: this.titleFontSize,
                        },
                    },
                    series:[
                        {
                            radius:this.titleFontSize * 4.5,
                            center:['50%','60%']
                        }
                    ],
                    // 图例大小与 文字大小调整
                    legend: {
                        itemWidth: this.titleFontSize,
                        itemHeight: this.titleFontSize,
                        itemGap: this.titleFontSize / 2,
                        textStyle: {
                            fontSize: this.titleFontSize / 2
                        }
                    }
                }
                this.chartInstance.setOption(adapterOptions);
                //重新计算和绘制图表
                this.chartInstance.resize()
            })
        },
        handleClick(val){
            console.log(val);
            if(val=='prev'){
                this.currentIndex--
                if(this.currentIndex < 0){
                    this.currentIndex = this.allData.length-1
                }
            }
            if(val=='next'){
                this.currentIndex++
                if(this.currentIndex > this.allData.length-1){
                    this.currentIndex = 0
                }
            }
            this.updateChart()
        }
    }
}
</script>
<style lang='scss' scoped>
div.com-container{
    position: relative;
    span{
        color: #FFF;
        font-size: 66px;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        cursor: pointer;
        &.prev{

        }
        &.next{
            left: initial;
            right: 5% !important; 
        }
    }
    div.title{
        font-size: 66px;
        position: absolute;
        right: 5%;
        bottom: 5%;
        color: #FFF;
    }
}
</style>